<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="large" ref="formRef" :rules="rules" :model="form" label-width="200px">
      <!--添加店员-->
      <div class="common-form">添加门店</div>
      <el-form-item label="所属用户">
        <el-select
          v-model="form.user_id"
          filterable
          remote
          placeholder="输入用户ID/昵称/姓名/手机号进行搜索"
          remote-show-suffix
          :remote-method="searchUser"
          :loading="search_loading"
          class="max-w460"
          default-first-option
        >
          <el-option
            v-for="item in userOptions"
            :key="item.user_id"
            :label="item.real_name ? item.real_name : item.nickName"
            :value="item.user_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称" prop="store_name">
        <el-input
          class="max-w460"
          v-model="form.store_name"
          placeholder="请输入店铺名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="logo">
        <el-row>
          <div class="img" v-if="form.logo">
            <img
              :src="form.logo"
              width="100"
              height="100"
              @click="openUpload('store_logo')"
            />
          </div>
          <el-button icon="Picture" @click="openUpload('store_logo')" v-else
            >选择图片</el-button
          >
        </el-row>
      </el-form-item>
      <el-form-item label="联系人" prop="form.linkman">
        <el-input
          class="max-w460"
          v-model="form.linkman"
          placeholder="请输入联系人"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="form.phone">
        <el-input
          class="max-w460"
          v-model="form.phone"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在地区" prop="form.region_id">
        <el-cascader v-model="form.region_id" :options="regions" />
      </el-form-item>
      <el-form-item label="详细地址" prop="form.address">
        <el-input
          class="max-w460"
          v-model="form.address"
          placeholder="请填写详细地址或地图选址"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="cancelFunc">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <GdMap @setAddress="getMapAddress"></GdMap>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
  </div>
</template>

<script lang="ts" setup>
import { getUserOption } from "@/api/user";
import router from "@/router";
import { onMounted, ref } from "vue";
import GdMap from "@/components/map/GdMap.vue";
import { getRegionOption } from "@/api/utils";
import { useRoute } from 'vue-router'; // 导入 useRoute 钩子
import { editShop, shopDetail } from "@/api/store";
import { ElMessage } from "element-plus";
const route = useRoute(); // 获取当前路由对象
const form = ref({
  store_id:0,
  user_id: "",
  store_name: "",
  logo_image_id: 0,
  linkman: "",
  phone: "",
  logo: "",
  region_id: [] as number[],
  address: "",
  coordinate: "",
});
const formRef = ref<any>(null);
const rules = ref({
  user_id: [
    { required: true, message: "请选择所属用户", trigger: "blur" },
  ],
  store_name: [
    { required: true, message: "请输入店铺名称", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  linkman: [
    { required: true, message: "请输入联系人", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
  ],
  region_id: [
    { required: true, message: "请选择所在地区", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入详细地址", trigger: "blur" },
  ],
});
const regions = ref<any[]>([]);
const loading = ref(false);
const userOptions = ref<any[]>([]);
const search_loading = ref(false);
/*是否上传图片*/
const isupload = ref(false);
const type = ref("");
const onSubmit = () => {
  formRef.value.validate().then(()=>{
    editShop(form.value).then((res: any) => {
      if (res.code == 1) {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        router.go(-1);
      }
    });
  }).catch(()=>{
    ElMessage.error("请填写完整信息");
  });
};
const searchUser = (query: string) => {
  if (query !== "") {
    search_loading.value = true;
    getUserOption({
      keyword: query,
    }).then((res: any) => {
      if (res.code == 1) {
        userOptions.value = res.data;
        search_loading.value = false;
      }
    });
  } else {
    userOptions.value = [];
  }
};
/*上传*/
const openUpload = (e: any) => {
  type.value = e;
  isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
  if (e != null && e.length > 0) {
    if (type.value == "avatarUrl") {
      form.value.logo = e[0].file_path;
    }
  }
  isupload.value = false;
};

const cancelFunc = () => {
  router.go(-1);
};
const getMapAddress = (e: any) => {
  form.value.address = e.address;
  form.value.coordinate = e.lat+","+e.lng;
};
onMounted(() => {
  const store_id = route.query.store_id;
  shopDetail({
    store_id: store_id,
  }).then((res: any) => {
    if (res.code == 1) {
      let data = res.data.model;
      form.value = {
        store_id:data.store_id,
        user_id: data.user_id,
        store_name: data.store_name,
        logo_image_id: data.logo_image_id,
        linkman: data.linkman,
        phone: data.phone,
        logo: data.logo.file_path,
        region_id: [data.province_id,data.city_id,data.region_id],
        address: data.address,
        coordinate: data.coordinate,
      };
      searchUser("" + data.user_id);
    }
  });
  getRegionOption().then((res: any) => {
    if (res.code == 1) {
      regions.value = res.data;
    }
  });
});
</script>

<style lang="scss" scoped>
.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
